<template>
  <div>
    home页
    <button ref="btnRef" @click="changeMsg">按钮</button>
    {{ msg }}
   
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    // 自动 包装一个对象，将 数据初始值 定义在包装对象的value属性中 并使用Proxy代理返回代理对象
    const msg = ref('你好vue3')
    const changeMsg = () => {
      msg.value = '值改变了'
      console.log(btnRef.value);
    }
    // ref 存储dom或者 子组件实例
    const btnRef = ref(null)
    
    return {
      msg,
      changeMsg,
      btnRef
    }
  }
}
</script>

<style lang="scss" scoped>

</style>